<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('U-KDmOAYexWJB4bMdYwy8')}}</p>
      <div class="wrap-operate-container">
        <div class="wrap-operate-area">
          <div class="operate-timepicker-item">
            <label class="title">{{$t('GDfXa14FG03v7f_zmtW5G')}}:</label>
            <div class="content">
              <!-- <DatePicker
                v-model="timescope"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始时间和结束时间"
                style="width: 300px"
              ></DatePicker> -->
              <DatePicker v-model="start" type="date" :placeholder="$t('fhfZgPQPJRncBiK0PvX4A')"></DatePicker>--
              <DatePicker v-model="end" type="date" :placeholder="$t('1qS0xmIdX5CYQyXEqH8hD')"></DatePicker>
            </div>
          </div>
          <div class="operate-btn-item">
            <Button class="item" type="info" icon="ios-search" @click="query"
              >{{$t('9ZYL6riI1fheWqEf_uo-M')}}</Button
            >
            <Button
              class="item"
              type="info"
              icon="ios-card"
              @click="exportExcel"
              >{{$t('ssHl1qTS2oMuNp3RZnkQY')}}</Button
            >
          </div>
        </div>
      </div>
      <Table ref="table" :loading="loading" :columns="columns" :data="data"></Table>
    </Card>
  </div>
</template>

<script>
import moment from 'moment'
// import echarts from 'echarts'
import { getStatsByPhoneStation } from '@/api/data2'
import { asyncDownloadExcel } from '@/libs/util'

export default {
  name: 'phone_income',
  data () {
    return {
      loading: false,
      indicator: 'money',
      columns: [],
      data: [],
      start: moment().subtract(7, 'days').format('YYYY-MM-DD'),
      end: moment().format('YYYY-MM-DD')
    }
  },
  mounted () {
    // this.renderChart()
    this.query()
  },
  methods: {
    async query () {
      const { code, data, desc } = await getStatsByPhoneStation({
        operatorid: this.$store.state.user.operatorId, // 要查询的运营商id
        startdt: moment(this.start).format('YYYY-MM-DD'), // 查询的起始日期 >=
        enddt: moment(this.end).format('YYYY-MM-DD') // 查询的结束日期 <=
      })
      if (code == 200) {
        this.columns = data.columns || []
        this.data = data.data || []
        this.$Message.success(desc || this.$t('ZOwDDNOQNA4eXpqth8gQH'))
        // this.renderChart()
      } else {
        this.$Message.error(desc)
      }
    },
    queryAll () {},
    exportExcel () {
      asyncDownloadExcel({
        // dataSource: this.data,
        // fields: this.columns,
        $el: this.$refs.table.$el,
        filename: this.$t('vPGs_5YcfJNZAN5wpIhsK')
      })
    }
  }
}
</script>

<style></style>
